<!-- subpkg_consult/room/components/message-info.vue -->
<script lang="ts" setup>
import { useUserStore } from "@/stores/user"
import type { MsgItem } from "@/types/room"
import dayjs from "dayjs"

const props = defineProps<{
  type: number
  info: MsgItem
}>()

// 时间格式转换
const formatTime = (time: string | number | Date) => {
  // return dayjs(time).format("HH:mm")
  // return dayjs(time).format("YYYY-MM-DD HH:mm")
  return dayjs(time).format("MM-DD HH:mm")
  // return dayjs(time).format("YYYY年MM月DD日 HH:mm")
}
const userStore = useUserStore()
</script>

<template>
  <!-- 文字/图片消息 -->
  <view
    class="message-item"
    :class="{ reverse: info.from === userStore.getUserId() }"
  >
    <image
      class="room-avatar"
      :src="info.fromAvatar || '/static/uploads/doctor-avatar-2.png'"
    />
    <view class="room-message">
      <view class="time">{{ formatTime(info.createTime!) }}</view>
      <view v-if="type === 1" class="text">
        {{ info.msg?.content }}
      </view>
      <image
        v-else-if="type === 4"
        class="image"
        :src="info.msg?.picture?.url"
        mode="widthFix"
      />
    </view>
  </view>
</template>

<style lang="scss">
.message-item {
  display: flex;
  align-self: flex-start;
  margin-top: 60rpx;

  .room-avatar {
    width: 80rpx;
    height: 80rpx;
    border-radius: 50%;
  }

  .room-message {
    margin-left: 20rpx;
  }

  .time {
    font-size: 26rpx;
    color: #979797;
  }

  .image {
    max-width: 420rpx;
    margin-top: 10rpx;
  }

  .text {
    max-width: 420rpx;
    line-height: 1.75;
    padding: 30rpx 40rpx;
    margin-top: 16rpx;
    border-radius: 20rpx;
    font-size: 30rpx;
    color: #3c3e42;
    background-color: #fff;
    position: relative;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      left: -25rpx;
      width: 26rpx;
      height: 52rpx;
      background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-1.png);
      background-size: contain;
    }
  }

  &.reverse {
    flex-direction: row-reverse;
    align-self: flex-end;

    .room-message {
      margin-left: 0;
      margin-right: 20rpx;
    }

    .time {
      text-align: right;
    }

    .text {
      background-color: #16c2a3;
      color: #fff;

      &::after {
        left: auto;
        right: -25rpx;
        background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/im-arrow-2.png);
      }
    }
  }
}
</style>
